<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			body {
				background: linear-gradient(#1e293d,#151c22);
			}

			#myCanvas {
				position: absolute;
				z-index: 1;
			}
			#lightBtn{
				position: fixed;
				left: 50px;
				top: 450px;
				width: 150px;
				text-align: center;
				padding: 8px 24px;
				color: #fff;
				border: 1px solid #fff;
				border-radius: 8px;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				cursor: pointer;
				z-index: 20;
				transition: .2s;
				overflow: hidden;
			}
			#lightBtn:hover{
				box-shadow: 0 0 10px #fff,0 0 6px #fff inset;
			}
			#lightBtn.act{
				background-color: #52a6bd;
				box-shadow: 0 0 20px #fff,0 0 6px #fff;
			}
			#lightBtn.act::before{
				content: "";
				position: absolute;
				left: -10px;
				top: -180px;
				width: 50px;
				height: 400px;
				background-color: #ffffff55;
				transform: rotate(65deg);
			}
		</style>
	</head>
	<body>
		<div id="lightBtn" class="">开启发光，测试性能</div>
		<canvas id="myCanvas" width="800" height="800"></canvas>
		<script type="text/javascript" src="tCanvas.js"></script>
		<script type="text/javascript">
			var pDemo = new Particle({
				mode: 9,
				mode9(){
					var _this = this
					this.dis = 18000
					this.f = 1200
					this.zoomQuotiety = 5
					this.drawSide = true
					this.drawFace = true
					this.rX = 0.1
					this.dragY = this.rX * 180 / Math.PI
					// 搭建灯光
					// this.lightList.push({type: "parallel",vector: [-1,1,-1],lightness: 20})
					// this.lightList.push({type: "parallel",vector: [1,1,-1],lightness: 20})
					// this.lightList.push({type: "parallel",vector: [-1,-1,-1],lightness: 20})
					// this.lightList.push({type: "parallel",vector: [1,-1,-1],lightness: 20})
					// this.lightList.push({type: "env",lightness: 5})
					var options = []
					for(let i=0;i<3;i++){ // 后景五方块
						for(let j=0;j<3;j++){
							if((i+j)%2==0){
								options.push({x: (i-1)*1600,y: (j-1)*1600,z: -12000,sx: 800,sy: 800,sz: 200})
							}
							if(i==1&&j==0){ // 后上方块
								options.push({x: (i-1)*1600,y: (j-1)*1600-300,z: -12000,sx: 800,sy: 500,sz: 200})
							}
						}
					}
					for(let i=-1;i<2;i+=2){ // 底部长纵
						options.push({x: i*2200,y: 2200,z: 0,sx: 200,sy: 200,sz: 14000})
					}
					for(let i=-1;i<2;i+=2){ // 顶部长纵
						options.push({x: i*1100,y: -2400,z: 1000,sx: 600,sy: 0,sz: 12800})
					}
					for(let i=-1;i<2;i+=2){ // 两侧细长
						options.push({x: i*2400,y: 0,z: 0,sx: 0,sy: 50,sz: 16000})
					}
					options.push({x: 0,y: 0,z: -16000,sx: 2400,sy: 50,sz: 200}) // 后方细长
					// options.push({
					// 	x: i*300,
					// 	y: Math.random()*800,
					// 	z: -16000,
					// 	sx: 100,
					// 	sy: Math.random()*800+400,
					// 	sz: 10,
					// })
					options.forEach(op=>{
						op.isTransform = true
						op.faceColor = [255,255,255,1]
						op.sideColor = [255,255,255,1]
						op.drawSide = false
					})
					var tempOption = []
					for(let i=0;i<50;i++){ // 两侧随机
						tempOption[i] = []
						for(let j=-1;j<2;j+=2){
							let rdmsy = Math.random()*800+200
							let rdmy = Math.random()*200
							let obj = {
								x: j*2400,
								y: rdmy,
								z: 600*i-16000,
								sx: 0,
								get sy(){
									return rdmsy + Math.sin(_this.ms/500+i)*400
								},
								sz: 120,
								isTransform: true,
								drawFace: false
							}
							tempOption[i][j] = [rdmsy,rdmy]
							options.push(obj)
						}
					}
					for(let i=0;i<50;i++){ // 两侧随机端点
						for(let j=-1;j<2;j+=2){
							options.push({
								x: j*2400,
								get y(){
									return tempOption[i][j][0] + tempOption[i][j][1] + Math.sin(_this.ms/500+i)*400
								},
								// y: tempOption[i][j].sy+tempOption[i][j].y,
								z: 600*i-16000,
								sx: 0,
								sy: Math.random()*40,
								sz: 120,
								isTransform: true,
								faceColor: [255,255,255,1]
							})
						}
					}
					for(let i=0;i<50;i++){ // 两侧随机端点
						for(let j=-1;j<2;j+=2){
							options.push({
								x: j*2400,
								get y(){
									return -tempOption[i][j][0] + tempOption[i][j][1] - Math.sin(_this.ms/500+i)*400
								},
								z: 600*i-16000,
								sx: 0,
								sy: Math.random()*40,
								sz: 120,
								isTransform: true,
								faceColor: [255,255,255,1]
							})
						}
					}
					for(let i=-7;i<8;i++){ // 后方随机
						let rdmy = Math.random()*400+200
						options.push({
							x: i*300,
							y: 0,
							z: -16000,
							sx: 100,
							get sy(){
								return rdmy + Math.sin(_this.ms/500+i)*400
							},
							sz: 10,
							isTransform: true,
							faceColor: [255,255,255,.3],
							lineWidth: 1000
						})
					}
					options.push({ // 顶棚
						x: 0,
						y: -2400,
						z: 0,
						sx: 2500,
						sy: 2,
						sz: 12000,
						isTransform: true,
						faceColor: [163,189,214,1]
					})
					options.push({
						x: 0,
						y: 2400,
						z: 0,
						sx: 2500,
						sy: 2,
						sz: 14000,
						drawSide: false,
						isTransform: true,
						faceColor: [22,35,47,.8]
					})
					var cFrame = this.tCubic(options)
					// 坐标轴绘制回调
					var axisFrame = () => {
						var lines = []
						var colors = ["#f00","#0f0","#00f"]
						lines.push([[-10000,0,0],[10000,0,0]])
						lines.push([[0,-10000,0],[0,10000,0]])
						lines.push([[0,0,-10000],[0,0,10000]])
						lines.forEach((l,index) => {
							this.cx.beginPath()
							l.forEach((p,i) => {
								var p2d = this.deDiv(p)
								this.cx[i===0?'moveTo':'lineTo'](...p2d.res)
							})
							this.cx.closePath()
							this.cx.strokeStyle = colors[index]
							this.cx.stroke()
						})
					}
					this.draw(()=>{
						// axisFrame()
						cFrame()
					})
					"rgba(22, 35, 47, 1.0)"
				}
			})
			lightBtn.onclick = e => {
				e.target.isOn = !e.target.isOn
				e.target.classList.toggle("act")
				if(e.target.isOn){
					e.target.innerText = "关闭发光"
					pDemo.glow = true
				}else{
					e.target.innerText = "开启发光，测试性能"
					pDemo.glow = false
				}
			}
		</script>
	</body>
</html>
